<template>
  <div class="container">
    <h1>事件绑定指令</h1>
    <hr />
    <div>
      <p>{{ age }}</p>
    </div>
    <button v-on:click="age++">加一</button>
    <button @click="age--">减一</button>
    <hr />
    <button @click="change">加加</button>
    <button @click="changeAge">减减</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 18,
    };
  },
  methods: {
    change() {
      this.age++;
    },
    changeAge() {
      this.age--;
    },
  },
};
</script>

<style>
p{
  width: 50px;
  height: 50px;
  color: #a6a1d9;
  font-size: 30px;
  text-align: center;
  line-height: 50px;
  border: 5px solid pink;
  border-radius: 50%;
}
h1 {
  color: #fe7299;
}
img {
  width: 150px;
  height: 150px;
}
input {
  color: #a6a1d9;
}
</style>

